<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🔥 限时砍价 - 帮我砍一刀！</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="floating-elements">
        <div class="coin coin-1">💰</div>
        <div class="coin coin-2">💎</div>
        <div class="coin coin-3">🎁</div>
        <div class="coin coin-4">⭐</div>
    </div>
    
    <div class="container">
        <div class="header">
            <div class="fire-icon">🔥</div>
            <h1 class="title">限时砍价活动</h1>
            <div class="countdown">
                <span class="countdown-text">活动倒计时：</span>
                <span class="countdown-timer" id="countdown">23:59:59</span>
            </div>
        </div>

        <div class="product-card">
            <div class="product-badge">
                <span class="hot-badge">🔥 爆款</span>
                <span class="discount-badge">限时特惠</span>
            </div>
            <div class="product-image">
                <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=300&h=300&fit=crop" alt="精美商品">
                <div class="image-overlay">
                    <div class="original-price">原价：￥299.00</div>
                </div>
            </div>
            <div class="product-info">
                <h2 class="product-title">🎯 超值精品 - 限量抢购</h2>
                <p class="product-desc">高品质商品，错过就没有了！快来帮我砍价吧～</p>
                <div class="price-info">
                    <span class="current-price" id="current-price">￥199.00</span>
                    <span class="target-price">目标价：￥99.00</span>
                </div>
            </div>
        </div>

        <div class="progress-section">
            <div class="progress-header">
                <h3>砍价进度</h3>
                <div class="participants">
                    <span class="participant-count" id="participant-count">已有 <strong>1,234</strong> 人参与</span>
                </div>
            </div>
            <div class="progress-container">
                <div class="progress-track">
                    <div class="progress-bar" id="progress-bar">
                        <div class="progress-glow"></div>
                    </div>
                    <div class="progress-thumb" id="progress-thumb">
                        <i class="fas fa-gift"></i>
                    </div>
                </div>
                <div class="progress-labels">
                    <span class="start-label">￥199</span>
                    <span class="end-label">￥99</span>
                </div>
            </div>
            <div class="progress-text" id="progress-text">
                <span class="remaining-amount">还差 ￥100.00</span>
                <span class="success-text">就能免费拿！</span>
            </div>
        </div>

        <div class="action-section">
            <button class="bargain-button" id="bargain-button">
                <span class="button-icon">⚡</span>
                <span class="button-text">帮好友砍一刀</span>
                <div class="button-shine"></div>
            </button>
            
            <div class="bargain-result" id="bargain-result"></div>
            
            <div class="recent-activity">
                <h4>最近砍价记录</h4>
                <div class="activity-list" id="activity-list">
                    <div class="activity-item">
                        <span class="user">张**</span> 刚刚砍了 <span class="amount">￥2.33</span>
                    </div>
                    <div class="activity-item">
                        <span class="user">李**</span> 1分钟前砍了 <span class="amount">￥1.88</span>
                    </div>
                    <div class="activity-item">
                        <span class="user">王**</span> 2分钟前砍了 <span class="amount">￥3.66</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="share-section">
            <h3>分享给更多好友，砍价更快！</h3>
            <div class="share-buttons">
                <button class="share-btn wechat-btn" id="share-wechat">
                    <i class="fab fa-weixin"></i>
                    <span>微信好友</span>
                </button>
                <button class="share-btn moments-btn" id="share-moments">
                    <i class="fas fa-share-alt"></i>
                    <span>朋友圈</span>
                </button>
                <button class="share-btn qq-btn" id="share-qq">
                    <i class="fab fa-qq"></i>
                    <span>QQ空间</span>
                </button>
            </div>
        </div>

        <div class="rules-section">
            <details class="rules-details">
                <summary>活动规则 <i class="fas fa-chevron-down"></i></summary>
                <div class="rules-content">
                    <p>• 每人每天可以砍价一次</p>
                    <p>• 邀请好友砍价，砍价金额更大</p>
                    <p>• 砍到目标价格即可免费获得商品</p>
                    <p>• 活动最终解释权归平台所有</p>
                </div>
            </details>
        </div>
    </div>

    <div class="success-modal" id="success-modal">
        <div class="modal-content">
            <div class="success-animation">🎉</div>
            <h2>恭喜你！砍价成功！</h2>
            <p>商品已添加到购物车，快去结算吧！</p>
            <button class="modal-btn" id="modal-close">立即购买</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>